由於前面我們都是使用 3.9.1版 來介紹
今天要來介紹 4.0 啦~~

gulp4.0 多了 parallel(同時執行) 與 series(依序執行)

且 parallel 與 series 可同時使用

那麼接下來

我們就要介紹如何修改啦

由於輸入 gulp -v

會看到 cli 版本為3.9.1

我們必須先將 gulp-cli 降版

輸入

npm uninstall -g gulp-cli
npm i -g gulp-cli 2.3.0

若無法刪除
可參考此網址
https://github.com/gulpjs/gulp-cli/issues/178

註解

gulp.task('sequence', gulpSequence('clean','jade','sass','babel','vendorJS'))
// gulp.task('build', ['sequence'])
// gulp.task('default',['jade','sass','babel','vendorJS','browser-sync','image-min','watch']);

加入

gulp.task('build',
    gulp.series(
        'clean',
        gulp.parallel('jade','sass','babel')
    )
)

這裡不能把 clean 放進 parallel的原因為
若它同時執行
可能 sass做完 又 clean掉

不過這裡會出現幾個出錯

vendorJS
必須將(先前的bower刪除)

gulp.task('vendorJS',function(){
    return gulp.src([
        './.tmp/vendors/**/**/*.js',
        './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
        ])
        .pipe($.order([
            'jquery.js',
            'bootstrap.js'
        ]))
        .pipe($.concat('vendors.js'))
        .pipe($.if(option.env === 'production',$.uglify()))
        .pipe(gulp.dest('./public/js'))
});

clean

還有一個錯誤為 clean 的時候
找不到 public 資料夾
所以必須將 clean
增加

allowEmpty: true

gulp.task('clean', function () {
    return gulp.src(['./.tmp','./public'], {read: false,allowEmpty: true})
        .pipe(clean());
});

jade

由於不知道它是同步或非同步
必須補上一個 return

gulp.task('jade', function() {
    return gulp.src('./source/**/*.jade')
    .pipe($.plumber())
    .pipe($.jade({
        pretty: true
    }))
    .pipe(gulp.dest('./public/'))
    .pipe(browserSync.stream())
});

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷